<template>
  <div class="game">
    <div id="name">
      <a class="char display-3">黄</a>
      <a class="char display-3" @click="removeChar(char1)" >{{ char1 }}</a>
      <a class="char display-3" @click="removeChar(char2)" >{{ char2 }}</a>
    </div>
    <div id="btns">
      <v-btn color="blue" class="white--text opbtn" @click="like">
        <v-icon left dark>plus_one</v-icon>
        喜欢
      </v-btn>
      <v-btn color="red" class="white--text opbtn" @click="dislike">
        <v-icon left dark>exposure_neg_1</v-icon>
        不喜欢
      </v-btn>
      <v-btn color="grey" class="white--text opbtn" @click="next">
        <v-icon left dark>refresh</v-icon>
        换一个
      </v-btn>
    </div>
    <v-dialog
      v-model="dialog"
      max-width="290"
    >
      <v-card>
        <v-card-title class="headline">删除字符</v-card-title>

        <v-card-text>
          确认要移除“{{ charToRemove }}”吗？
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn
            color="green darken-1"
            flat="flat"
            @click="dialog = false"
          >
            取消
          </v-btn>

          <v-btn
            color="green darken-1"
            flat="flat"
            @click="confirmRemoveChar"
          >
            确认
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-snackbar
      v-model="snackbar"
      :top="true"
      :timeout="3000"
    >
      {{ tip }}
      <v-btn
        color="pink"
        flat
        @click="snackbar = false"
      >
        关闭
      </v-btn>
    </v-snackbar>
  </div>
</template>

<script>
  export default {
    name: 'Game',
    created() {
      const self = this;
      this.axios.get('/api/next')
      .then(function(response) {
        console.log("resp:" + response.data);
        self.setName(response.data);
      })
      .catch(function(error) {
        console.log("error:" + error);
      });
    },
    data() {
      return {
        dialog: false,
        name:'',
        char1:'',
        char2:'',
        charToRemove:'',
        snackbar: false,
        tip:''
      }
    },
    methods: {
      like() {
        const self = this;
        console.log("喜欢");
        this.axios.post('/api/like', {
          name: self.name
        })
        .then(function(response) {
          console.log("resp:" + response.data);
          self.setName(response.data);
        })
        .catch(function(error) {
          console.log("error:" + error);
        });
      },
      dislike() {
        const self = this;
        console.log("不喜欢");
        this.axios.post('/api/dislike', {
          name: self.name
        })
        .then(function(response) {
          console.log("resp:" + response.data);
          self.setName(response.data);
        })
        .catch(function(error) {
          console.log("error:" + error);
        });
      },
      next() {
        const self = this;
        console.log("换一个");
        this.axios.get('/api/next')
        .then(function(response) {
          console.log("resp:" + response.data);
          self.setName(response.data);
        })
        .catch(function(error) {
          console.log("error:" + error);
        })
      },
      removeChar(char) {
        this.charToRemove = char;
        this.dialog = true;
      },
      confirmRemoveChar() {
        this.dialog = false;
        const self = this;
        this.axios.post('/api/remove', {
          char: self.charToRemove
        })
        .then(function(response) {
          console.log("resp:" + response.data);
          self.snackbar = true;
          self.tip = '剩余' + response.data + '个字';
        })
        .catch(function(error) {
          console.log("error:" + error);
        });
      },
      setName(name) {
        this.name = name;
        if(name.length > 2) {
          this.char1 = name.substring(2,1);
          this.char2 = name.substring(3,2);
        }
        else {
          this.char1 = name.substring(2,1);
          this.char2 = '';
        }
      }
    }
  } 
</script>

<style scoped>
#name {
  margin: auto;
  width: 100%;
}

.char {
  color: #000000;
}

#btns {
  margin-top: 50px;
}

.game {
  margin: 50px;
  text-align: center;
}

.opbtn {
  margin-left: 40px;
  margin-right: 40px;
  width: 128px;
}
</style>
